<template>
	<view class="content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'">

	<!-- <view class="content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'"> -->
		<view class="warp">
			<c-gap height="100rpx" />
			<view class="nav-bar banxin">
				<view><uni-icons type="back" size="24" color="#fff" @tap="$c.jump(1, 5)"></uni-icons></view>
				<view class="title">上传照片</view>
			</view>
			<c-gap height="50rpx" />
			<view class="sex-title">上传照片</view>

			<view class="avther-main" @tap.stop="avaterChange">
				<image v-if="imageurl != ''" class="avther-image" :src="imageurl" mode=""></image>
				<text v-else class="icon icon-paizhao"></text>
			</view>
			<view class="pho-des">请上传照片用于您的头像</view>
			<!-- <view class="pho-des">保证照片像素清晰、五官可见</view>
			<view class="pho-des">通过认证后、此照片将上传到你的相册</view> -->
			<c-gap height="150rpx" />
			<view class="register-btn1"  @tap.stop="skipStep()">继续</view>
			<!-- <view class="register-btn2" @tap.stop="skipStep()">{{tiaoguo}}</view> -->
		</view>
	</view>
</template>

<script>
	import CGap from '@/components/c-gap.vue';
    // import crypto from 'crypto-js';
	
	import { Base64 } from 'js-base64';
	import uploadImage from '@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js';
	
	export default {
		
		components: {
			CGap
		},
		data() {
			return {
				$c: this.$c,
				current: 0,
				swiperHeight: 0,
				tiaoguo:'跳过',
				jixu_flag:0,
				imageurl: '',
				bucketName: '',
				objectKey: '',
				url_str: '',
				key:'',
				accessKeyId:'',
				accessKeySecret:'',
				securityToken:'',
				host:'',
				data: {
					device: '3456789089876',
					sex: '1',
					nickname: '',
					birthday: '',
					height: '',
					weight: '',
					career: '',
					income: '',
					save_city: '',
					avatar: '',
					phone: '',
					code: '',
					password: '',
					phone_model: 'dfsdf'
				}
			};
		},
		onLoad() {
			this.data = uni.getStorageSync('registerInfo');
           this.OSSbutkrequs()
			
			
		},
		onShow() {
		// #ifdef  APP-PLUS
		 this.tiaoguo = '跳过';
		 
		// #endif
		
		// #ifdef MP-WEIXIN
		this.jixu_flag = 1;
		 this.tiaoguo = '立即登录';
		// #endif	
		},
		
		methods: {
			async OSSbutkrequs(){
				  let res = await this.$c.post('/app/ossSts/getStsToken');
				  
				  console.log(JSON.stringify(res.data)+'*******8888******');	  
				  let response = res.data.response;
				  let credentials = response.credentials;
				  this.bucketName = res.data.bucketName;
				  this.key = res.data.key;
				  this.host = res.data.endpoint;
				  this.accessKeyId =credentials.accessKeyId;
				  this.accessKeySecret = credentials.accessKeySecret;
				  this.securityToken = credentials.securityToken;				  
			 },
		

			OSSTokenData() {
				const date = new Date();
				date.setHours(date.getHours() + 1);
				const policyText = {
				  expiration: date.toISOString(), // 设置policy过期时间。
				  conditions: [
				    // 限制上传大小。
				    ["content-length-range", 0, 1024 * 1024 * 1024],
				  ],
				};
								
				uni.chooseImage({
					count: 1, //默认9
					success: async (chooseImageRes) => {
						// this.data.avatar = res.tempFilePaths[0];
						const tempFilePaths = chooseImageRes.tempFilePaths;
						
						console.log(tempFilePaths + '*****host*****'+this.host);
						console.log( this.bucketName + '*****key*****'+ this.key);
						console.log( this.accessKeyId + '*****accessKeySecret*****'+ this.accessKeySecret);
						console.log( this.securityToken + '**********');
						let posturl = 'https://'+this.bucketName+'.'+this.host+tempFilePaths[0];
						wx.uploadFile({
						  url: posturl,
						  filePath: tempFilePaths[0],
						  name: this.bucketName, // 必须填file。
						  formData: {
						    key:this.key,
						    policy:Base64.encode(JSON.stringify(policyText)),
						    OSSAccessKeyId:  this.accessKeyId,
						    securityToken:this.securityToken,
						    // 'x-oss-security-token': securityToken // 使用STS签名时必传。
						  },
						  success: (res) => {
							  console.log(JSON.stringify(res)+'^^^^^^^^^^^^^');
						    // if (res.statusCode === 204) {
						    //   console.log('上传成功');
						    // }
						  },
						  fail: err => {
						    console.log(err);
						  }
						});
						
						// uni.uploadFile({
						// 	url: 'https://oss-cn-shenzhen.aliyuncs.com/',
						// 	filePath: tempFilePaths[0],
						// 	name:'zhiyuapphn',
						// 	header: {
						// 		token: uni.getStorageSync('token'), //头像token，参考返回数据
						// 	},
						// 	formData: {
						// 		policy:policyText,
						// 		key: 'image/zouseoif.jpg',
						// 		OSSAccessKeyId: 'STS.NUj6CMfshnWBd1CVMXW6NtYiS', // OSS访问密钥ID
						// 		signature: '' // 签名
						// 	},
						// 	success: (uploadFileRes) => {
						// 		// var stra = JSON.parse(uploadFileRes.data);

						// 		console.log('*******uploadFileRes.data:'+JSON.stringify(uploadFileRes));
						// 		// this.imageurl = stra.data;
						// 		//console.log('*******imageurl:'+this.imageurl);

						// 	},
						// 	fail: e => {
      //                               console.log(JSON.stringify(e));
						// 	}
						// });
					}
				})
			},
			avaterChange() {
				// #ifdef MP-WEIXIN
				this.wxupload();
				// #endif	
				// #ifdef  APP-PLUS
				uni.chooseImage({
					count: 1, //默认9
					success: async (chooseImageRes) => {
						// this.data.avatar = res.tempFilePaths[0];
						const tempFilePaths = chooseImageRes.tempFilePaths;

						// console.log(tempFilePaths);

						// self.imageurl = res.tempFilePaths[0]; 192.168.2.218 api.ptszyxx.com
						let token =	uni.getStorageSync('token');		
						uni.uploadFile({
							url: 'https://api.ptszyxx.com/app/geren/uppic',
					        filePath: tempFilePaths[0],
							name: 'image', // 类型
							header: {
								'token': token, //头像token，参考返回数据
							},
							formData: {

								// token:uni.getStorageSync('token'), //头像token，参考返回数据

								// openid: this._settingConfig.openid

								// type: Object, // 后台需要的参数,type:1是图片、type:2是视频

								 // path: chooseImageRes.tempFiles[0], // 后台需要的给他们路径
							},
							success: (uploadFileRes) => {
								var stra = JSON.parse(uploadFileRes.data);
								//console.log('*******uploadFileRes.data:'+uploadFileRes.data);
								this.imageurl = stra.data;
								//console.log('*******imageurl:'+this.imageurl);
							},
							fail: e => {

							}
						});

					}
				})
				// #endif
			},
			 wxupload()
			 {
				 wx.chooseImage({
				 	count: 1, //默认9
				 	success: async (chooseImageRes) => {
				 		// this.data.avatar = res.tempFilePaths[0];
				 		const tempFilePaths = chooseImageRes.tempFilePaths;
				 
				 		// console.log(tempFilePaths);
				 
				 		// self.imageurl = res.tempFilePaths[0]; 192.168.2.218 api.ptszyxx.com
				 		let token =	uni.getStorageSync('token');		
				 		wx.uploadFile({
				 			url: 'https://api.ptszyxx.com/app/geren/uppic',
				 	        filePath: tempFilePaths[0],
				 			name: 'image', // 类型
				 			header: {
				 				'token': token, //头像token，参考返回数据
				 			},
				 			formData: {
				 
				 				// token:uni.getStorageSync('token'), //头像token，参考返回数据
				 
				 				// openid: this._settingConfig.openid
				 
				 				// type: Object, // 后台需要的参数,type:1是图片、type:2是视频
				 
				 				 // path: chooseImageRes.tempFiles[0], // 后台需要的给他们路径
				 			},
				 			success: (uploadFileRes) => {
				 				var stra = JSON.parse(uploadFileRes.data);
				 				//console.log('*******uploadFileRes.data:'+uploadFileRes.data);
				 				this.imageurl = stra.data;
				 				//console.log('*******imageurl:'+this.imageurl);
				 			},
				 			fail: e => {
				 
				 			}
				 		});
				 
				 	}
				 })
			 },
			
			
			
			skipStep() {
				// this.$c.jump('/pages/m-pages/m-personnelList/index');
				uni.switchTab({
					// url: '/pages/msg'
					// url: '/pages/m-pages/m-home/index',
					url: '/pages/m-pages/m-personnelList/index'
				});
			},
			next() {
			    // if (!this.data.avatar) {
			    //     this.$c.show('请上传头像');
			    //     return;
			    // }
				
			    uni.setStorageSync('registerInfo', this.data);
				// #ifdef  APP-PLUS
					this.$c.jump('/pages/register/register8');
				// #endif	
				// #ifdef MP-WEIXIN
					this.registrequst();
				// #endif
			 
			}
		}
	};
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		min-height: 100vh;
		background-size: 750rpx 100vh;
		//background-repeat: no-repeat;
		background-position: 0 0;

		.warp {
			width: 702rpx;
			margin: 0 auto;

			.nav-bar {
				display: flex;
				font-weight: 550;
				font-size: 34rpx;
				color: #fff;

				.title {
					width: 680rpx;
					text-align: center;
					color: #fff;
				}
			}

			.sex-title {
				font-weight: 600;
				font-size: 48rpx;
				color: #fff;
				line-height: 62rpx;
			}

			.avther-main {
				width: 276rpx;
				height: 276rpx;
				border: 4rpx solid #fff2d7;
				// background-color: #221f30;
				border-radius: 50%;
				text-align: center;
				line-height: 276rpx;
				margin: 40rpx auto 40rpx;

				.icon-paizhao {
					font-size: 80rpx;
					color: #fff2d7;
				}
			}

			.avther-image {
				width: 276rpx;
				height: 276rpx;
				border-radius: 50%;
			}

			.pho-des {
				width: 702rpx;
				height: 64rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #a9a9a9;
				line-height: 64rpx;
				text-align: center;
			}

			.register-btn2 {
				width: 552rpx;
				height: 80rpx;
				display: block;
				margin: 0 auto;
				background-size: 100% 100%;
				text-align: center;
				line-height: 80rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 100rpx;
				color: #ffffff;
				margin-top: 80rpx;
			}

			.register-btn1 {
				margin: 0 auto;
				text-align: center;
				line-height: 120rpx;
				color: #a14617;
				width: 552rpx;
				height: 120rpx;
				background: linear-gradient(127deg, #fff4de 0%, #ffe6ba 100%, #ffe6ba 100%);
				border-radius: 60rpx;
			}
		}
	}
</style>